<template>

    <div style="height: 100% ;height: 100%; border: 1px solid brown; " :style="{backgroundImage:backgroundImage1}">



        <div style="width: 50% ;height: 55%; border: 1px solid; background: #3effa2;
    position: absolute;  top: 200px;left: 500px; right: 500px; bottom: 50px; " >
        <h1 class="topzi" style="margin-left: 200px">商家后台登陆</h1>

        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"   label-width="100px" style="margin-top: 60px" class="demo-ruleForm">
            <el-form-item prop="name" label="用户名" style="width: 500px">
                <el-input v-model="ruleForm2.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass" style="width: 500px">
                <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
            </el-form-item>
            <div style="margin-left: 50px">
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
                <el-button @click="registerClick">注册</el-button>
            </el-form-item>
            </div>
        </el-form>
    </div>
    </div>

</template>

<script>
    export default {
        data() {

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm2.checkPass !== '') {
                        this.$refs.ruleForm2.validateField('checkPass');
                    }
                    callback();
                }
            };

            return {
                // pathLie: this.$route.path,
                backgroundImage1: 'url(' +require('@/assets/login_background.jpg') + ')',
                ruleForm2: {
                    pass: '',
                    name: ''
                },
                rules2: {
                    pass: [
                        { required: true,validator: validatePass, trigger: 'blur' }
                    ],
                    name: [{required: true, message: '不能为空', trigger: 'blur'},
                        {pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文', trigger: 'blur'}],
                }
            };
        },
        methods: {
            submitForm(formName) {
                var that = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // console.log(this.ruleForm2.name)
                        // console.log(this.pathLie)

                      //写登录查询语句
                        const query = Bmob.Query("merchantsInfo");
                        query.equalTo("username","==", this.ruleForm2.name);
                        query.equalTo("password","==", this.ruleForm2.pass);
                        query.find().then(res => {
                            // console.log(res.length)
                          if(res.length>0){

                              this.$router.push( {name : "home" ,  params:{name:this.ruleForm2.name}})
                          }else{
                              this.$message({
                                  type: 'warning',
                                  message: '密码错误'
                              });
                              console.log('密码错误');
                          }

                        })
                    } else {
                        console.log('error submit!!');
                       //抱出登录失败的消息

                    }
                });
            },
            registerClick(){
                this.$router.push( {path : "/register"})
                // console.log(this.$route.params.user)
            }
        }
    }
</script>
<style>

</style>